<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
		.inner {
			height:  150px;
			background-color: pink;
		}	
	</style>	
</head>
<body>

	<div id="app">


		<!-- .stop 阻止冒泡 -->
	<!-- 	<div class="inner" @click="inner">
			<button @click.stop="btn">抽他</button>
		</div>
 -->

		<!-- .prevent 阻止默认事件 -->	

		<a href="https://www.baidu.com/" title="" ></a>
 
		<!-- .capture  阻止默认事件 -->	

		<div class="inner" @click="inner">
			<button @click.stop="btn">抽他</button>
		</div>



	</div>


<script src="vue.min.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			msg: '我喜欢双向数据绑定，你呢'
		},
		methods: {
			inner(){
				console.log('点击阿勒 inner div');
			},
			btn(){
				console.log( '点击了 btn 按钮' );
			}
		}
	});	



</script>



	
</body>
</html>